<template>
    <div id = "Home">
        <div class="heard">
            <div class="heard-left">
                <img :src="HeadPortrait">
            </div>
            <div class="heard-center">
                <p>
                    <span>{{site}}</span> 
                </p>
                <p>{{weather}}</p>
            </div>
            <div class="SearchBox">
                <input type="text" :value ="aa">
            </div>
        </div>
        <div class="center">
            <div class="center-box">
                <van-swipe :autoplay="3000" indicator-color="#38A83F">
                    <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img v-lazy="image" style="height: 5.013333rem" />
                    </van-swipe-item>
                </van-swipe>
            </div>
        </div>
        <div class="VillageHeat">
            <div class="inform">
                <img src="../../assets/img/inform.png">
                <span>{{informText}}</span>
            </div>
            <div class="VillageHeat-button">
                <div class="VillageHeat-button-box" v-for="item in VillageHeatButtonBox" >
                    <img :src="item.url" @click="geturl(item.path)">
                    <p>{{item.name}}</p>
                </div>
              
            </div>
        </div>
        <div class="bottom">4</div>
    </div>
</template>
<script>
export default {
    name: 'Home',
    data() {
        return {
            HeadPortrait: require("@/assets/img/HeadPortrait.png"),
            site: "富贵村",
            weather: "多云 21℃",
            aa:"搜索村庄",
            images: [
              'https://img.yzcdn.cn/vant/apple-1.jpg',
              'https://img.yzcdn.cn/vant/apple-2.jpg',
            ],
            informText: "平台通知 平台通知 平台通知 平台通知12soisos男女 开始看看大结局上看看",
            VillageHeatButtonBox :[
                {url:require("../../assets/img/InformImg.png"),name:"村内通知",path: "/Inform"},
                {url:require("../../assets/img/AffairImg.png"),name:"村内事情",path: "/Affair"},
                {url:require("../../assets/img/MaintainImg.png"),name:"村内维修",path: "/Maintain"},
                {url:require("../../assets/img/PovertyReliefImg.png"),name:"扶贫政策",path: "/PovertyRelief"},
                {url:require("../../assets/img/SalvationImg.png"),name:"救助扶贫",path: "/Salvation"},
                {url:require("../../assets/img/TreasureImg.png"),name:"致富经",path: "/Treasure"},
                {url:require("../../assets/img/BreedImg.png"),name:"种养技术",path: "/Breed"},
                {url:require("../../assets/img/OpinionImg.png"),name:"意见建议",path: "/Opinion"},
                ],

        }
    },
    methods: {
        geturl(i){
            this.$router.push(i);
        }
    },
}
</script>
<style scoped>
@import "../../assets/css/Home.css";
.heard{
    width: 100%;
    height: 1.173333rem;
    background: rgb(56,168,63);
    display: flex;
    
}
.heard-left{
    width: 1.253333rem;
    height: 1.173333rem;
}
.heard-left img{
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    margin: .16rem 0px .053333rem .3rem;
}
.heard-center{
    width: 1.28rem;
    height: 1.173333rem;
    font-family: "PingFang-SC-Medium";
    color: white;
}
.heard-center p:nth-child(1){
    width: 100%;
    font-size: .32rem;
    margin: .113333rem 0px .133333rem 0px;
}
.heard-center p:nth-child(2){
    width: 100%;
    font-size: .266667rem;  
}
.SearchBox input{
    width: 6.4rem;
    height: .773333rem;
    border-radius: .533333rem;
    padding-left: .666667rem;
    font-size: .373333rem;
    outline:none;
	border-style: none ;
	-webkit-appearance: none ;
	-webkit-user-select: text ;
    background-image: url('../../assets/img/SearchBox.png');
    background-repeat: no-repeat;
    background-size: .4rem .4rem;
    background-position: .133333rem .186667rem;
    border: 1px solid black; 
}

.center{
    width: 100%;
    height: 5.253333rem;
    background-image: url("../../assets/img/slideshow.png");
    background-repeat: no-repeat;
    background-size: 100% 4.4rem; 
    position: relative;
}
.center-box{
    width: 9.52rem;
    height: 5.013333rem;
    position: absolute;
    top: .24rem;
    left: .24rem;
}


.VillageHeat{
    width: 100%;
    height: 5.733333rem;
    margin-top: 8px;
}
.inform{
    width: 100%;
    height: .853333rem;
    background: rgb(186,225,188);
    border-radius: .533333rem;
    display: flex;
}
.inform img{
    width: .693333rem;
    height: .693333rem;
    margin-left: .213333rem;
    margin-top: .08rem;
}
.inform span{
    width: 8rem;
    height: .373333rem;
    margin-left: .213333rem;
    margin-top: .24rem;
    font-size: .32rem;
    line-height: .373333rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.VillageHeat-button{
    width: 100%;
    height: 4.346667rem;
    
    margin-top: .266667rem;
    display: flex;
    flex-wrap:wrap;
}
.VillageHeat-button-box{
    width: 1.36rem;
    height: 1.653333rem;
    margin: .346667rem 0px .346667rem .8rem; 
}
.VillageHeat-button-box img{
    width: 1.173333rem;
    height: 1.173333rem;
    /* background: blue; */
    margin: 0px .08rem;
}
.VillageHeat-button-box p{
    width: 1.36rem;
    height: .346667rem;
    font-size: .32rem;
    margin: 0px auto;
}
</style>
